<template>
    <div>
        <van-form @submit="onsubmit">
            <van-field
                    style="height: 10vh"
                    v-model="description"
                    name="简介"
                    placeholder="说说你的使用感受，入手渠道，转手原因..."
                    :rules="[{ required: true}]"
            />

            <van-field name="userHeader" label="上传图片">
                <template #input>
                    <van-uploader
                            :after-read="afterRead"
                            multiple :max-count="1"
                            v-model="fileList"
                            :rules="[{ required: true}]"
                    />
                </template>
            </van-field>
            <div style="display: flex;background: white">
                <div class="priceInput">
                    <van-field
                            v-model="price"
                            required
                            name="价格"
                            placeholder="请输入价格"
                            type="digit"
                            @touchstart.native.stop="show = true"
                            :rules="[{ required: true}]"
                    />

                </div>
                <div class="rmb">元</div>

            </div>


            <van-button round block type="info"
                        native-type="submit"
            >发布</van-button>

        </van-form>

    </div>
</template>
<script>

    import Vue from 'vue';
    import {Form, Stepper, Uploader, Checkbox, CheckboxGroup, Toast} from 'vant';
    import { NumberKeyboard } from 'vant';
    import {ApiService} from "../../axios/apiService";

    Vue.use(NumberKeyboard);
    Vue.use(Form);
    Vue.use(Stepper);
    Vue.use(Uploader);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    export default {
        name:"Resell",
        data() {
            return {
                fileList:[],
                show: false,
                username:'',
                phoneNumber:'',
                userHeader:'',
                description:'',
                url:'',
                price: null

            };
        },
        methods:{
            async afterRead(file) {
                console.log("this.afterRead()")
                //初试化
                let OSS = require('ali-oss');
                // var testFile = new File();
                // console.log(testFile);

                let client = new OSS({
                    region: 'oss-cn-chengdu',
                    accessKeyId:'LTAI5tKbKKZo33r8EpDqgGWH',
                    accessKeySecret:'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
                    bucket: 'jingzai-pethome',
                });
                //此时可以自行将文件上传至服务器
                try {
                    // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
                    // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
                    console.log(new Date().getTime())
                    var ti = new Date().getTime()
                    let result = await client.put('/img/'+ti+'.jpg',file.file)
                    console.log(result)
                    this.url = result.url
                } catch (e) {
                    console.log(e);
                }

            },
            onInput(value) {
                Toast(value);
            },
            onDelete() {
                Toast('删除');
            },
            onsubmit() {
                console.log("提交")
                console.log(this.description)
                console.log(this.url)
                console.log("price"+this.price)
                const inputGoods = new ApiService("/inputGoods")
                inputGoods.getParams({
                    userId:inputGoods.getCookie("userid"),
                    price:this.price,
                    description: this.description,
                    pictureUrl:this.url,
                    weight:0
                })

                Toast("发布成功！");
                location.reload();


            }
        }
    }
</script>
<style scoped>
    .rmb{
        background: white;
        margin-top: 1px;
        width: 10%;
    }
    .priceInput{
        width: 90%;
    }
</style>